<template>
  <div>
    <div>
      默认 有斑马线(zebra=true)，无横边线(horizontalBorder=false)
      <CloudTable
        class="test-table"
        :columns="columns"
        :dataSource="dataSource"
      ></CloudTable>
    </div>
    <div>
      常规显示模式 无斑马线(zebra=false)，有横边线(horizontalBorder=true),
      竖边线(verticalBorder=true)
      <CloudTable
        class="test-table"
        :columns="columns"
        :dataSource="dataSource"
        :zebra="false"
        :horizontalBorder="true"
        :verticalBorder="true"
      ></CloudTable>
    </div>
    <div>
      宽松模式(isLooseTable=true)，无斑马线(zebra=false),有横边线(horizontalBorder=true),
      无竖边线(verticalBorder=false)
      <CloudTable
        class="test-table"
        :columns="columns"
        :dataSource="dataSource"
        :zebra="false"
        :horizontalBorder="true"
        :verticalBorder="false"
        :isLooseTable="true"
      ></CloudTable>
    </div>
    <div style="margin-top: 40px">
      宽松模式(isLooseTable=true)， 无斑马线(zebra=false)，
      有横边线(horizontalBorder=true)， 竖边线(verticalBorder=true)
      <CloudTable
        class="test-table"
        :columns="columns"
        :dataSource="dataSource"
        :zebra="false"
        :horizontalBorder="true"
        :verticalBorder="true"
        :isLooseTable="true"
      ></CloudTable>
    </div>
    <div style="margin-top: 40px">
      宽松模式(isLooseTable=true)， 有斑马线(zebra=true)，
      无横边线(horizontalBorder=false)， 无竖边线(verticalBorder=false)
      <CloudTable
        class="test-table"
        :columns="columns"
        :dataSource="dataSource"
        :zebra="true"
        :horizontalBorder="false"
        :verticalBorder="false"
        :isLooseTable="true"
      ></CloudTable>
    </div>
    <div style="margin-top: 40px">
      行高不固定isLineHeightFixed=false
      <CloudTable
         class="test-table"
        :columns="columns5"
        :isLineHeightFixed="false"
        :dataSource="dataSource5"
        :zebra="true"
        :horizontalBorder="true"
        :verticalBorder="true"
        :isLooseTable="true"
      >
      </CloudTable>
    </div>
    <div style="margin-top: 40px">
      特殊类型处理：宽松模式模式(isLooseTable=true)，无斑马线(zebra=false)，
      有横边线(horizontalBorder=true), 竖边线(verticalBorder=true), column type:
      { date、dateTime、mobile、content、number、image16:9、image1:1、image4:3 }
      <CloudTable
        class="test-table test-table-warp"
        :columns="columns6"
        :dataSource="dataSource6"
        :zebra="false"
        :horizontalBorder="true"
        :verticalBorder="true"
        :isLooseTable="true"
      >
        <div slot="warp" slot-scope="text, record">
          <div class="table-row-warp">{{ record.content }}</div>
        </div>
        <div slot="image" slot-scope="text, record">
          <img
            src="../../../../src/assets/image/test.jpg"
            alt=""
            width="30px"
            height="40px"
          />
        </div>
      </CloudTable>
    </div>
  </div>
</template>

<script>
export default {
  title: '1.基础用法',
  subTitle: '基础用法',
  data() {
    return {
      columns: [
        {
          title: 'name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Sex',
          dataIndex: 'sex',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          sex: '男'
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          sex: '女'
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          sex: '男'
        },
      ],
      columns5: [
         {
          title: 'name',
          dataIndex: 'name',
          width: 600,
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Sex',
          dataIndex: 'sex',
        },
      ],
      columns6: [
        {
          title: '日期',
          dataIndex: 'date',
          type: 'date'
        },
        {
          title: '日期+时间',
          dataIndex: 'dateTime',
          type: 'dateTime'
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          type: 'mobile'
        },
        {
          title: '名称',
          dataIndex: 'content',
          type: 'content',
          scopedSlots: { customRender: 'warp' },
        },
        {
          title: '金额/数字',
          dataIndex: 'number',
          type: 'number'
        },
        {
          title: '图片',
          dataIndex: 'image',
          type: 'image16:9',
          scopedSlots: { customRender: 'image' },
        },
      ],
      dataSource5: [
        {
          key: '1',
          name: 'John BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn',
          age: 32,
          sex: '男'
        },
        {
          key: '2',
          name: 'Jim GreenJim GreenJim GreenJim GreenJim GreenJim GreenJim GreenJim GreenJim GreenJim GreenJim GreenJim GreenJim Green',
          age: 42,
          sex: '女'
        },
        {
          key: '3',
          name: 'Joe BlackJoe BlackJoe BlackJoe BlackJoe',
          age: 32,
          sex: '男'
        },
      ],
      dataSource6: [
        {
          key: '1',
          date: '2020-11-11',
          dateTime: '2020-11-11 20:20:20',
          mobile: '18393369757',
          content: '睡到几点深度思考睡到几点深度思考睡到几点深度思考睡到几点深度思考睡到几点深度思考睡到几点深度思考',
          number: '120,000,000',
          image: ''
        },
        {
          key: '2',
          date: '2020-11-12',
          dateTime: '2020-11-12 10:00:35',
          mobile: '028-3244355',
          content: '1发动机看看大家风范的1发动机看看大家风范的1发动机看看大家风范的1发动机看看大家风范的',
          number: '45455454',
          image: ''
        },
        {
          key: '3',
          date: '2020-12-1',
          dateTime: '2020-12-1 16:20:00',
          mobile: '028-3244355',
          content: '天天嚷嚷她突然突然',
          number: '56566565',
          image: ''
        },
      ],
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.test-table-warp {
  .table-row-warp {
    line-height: 22px;
    padding: 10px 0;
  }
}
</style>